/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-10-08 17:05:59
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-10-08 23:23:31
 * @FilePath: \react_staging\src\components\Search\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component } from "react";
import PubSub from "pubsub-js";
import axios from "axios";
export default class index extends Component {
  //搜索事件回调
  search = async () => {
    //获取用户输入连续解构赋值
    const {
      keyWordElement: { value: keyword },
    } = this;
    //发送请求前通知List更新状态
    // this.props.updataAppState({ isFirst: false, isLoading: true })
    PubSub.publish("userInfo", { isFirst: false, isLoading: true });
    //#region 发送网络请求。axios版本
    // axios.get(`/api1/search/users?q=${keyword}`).then(
    // 	(response) => {
    // 		// console.log('返回接口', response.data.items)
    // 		//发送请求成功时通知List更新状态
    // 		// this.props.updataAppState({
    // 		// 	isLoading: false,
    // 		// 	userList: response.data.items,
    // 		// })
    // 		PubSub.publish('userInfo',{isLoading:false,userList: response.data.items,})
    // 	},
    // 	(error) => {
    // 		//发送请求出错时通知List更新状态
    // 		// this.props.updataAppState({ isLoading: false, err: error.message })
    // 		PubSub.publish('userInfo',{ isLoading: false, err: error.message })
    // 	}
    // )
    //#endregion
    //发送网络请求--使用Fetch发送(优化1)
    // fetch(`/api1/search/users2?q=${keyword}`)
    //   .then(
    //     (response) => {
    //       console.log("联系服务器成功了", response);
    //       return response.json();
    //     },
    //     // (error) => {
    //     //   console.log("联系服务器失败了", error);
    //     // }
    //   )
    //   .then(
    //     (response) => {
    //       console.log("获取数据成功", response);
    //       return new Promise(() => {});
    //     },
    //     // (error) => {
    //     //   console.log("联系服务器失败了", error);
    //     // }
    //   )
    //   .catch((error) => {
    // 		console.log("请求出错",error)
    //   });
    try {
      const response = await fetch(`/api1/search/users2?q=${keyword}`);
      const data = await response.json();
      PubSub.publish("userInfo", { isLoading: false, userList: data.items });
    } catch (error) {
      console.log("请求失败", error);
      PubSub.publish("userInfo", { isLoading: false, err: error.message });
    }
  };
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input
            type="text"
            ref={(c) => (this.keyWordElement = c)}
            placeholder="enter the name you search"
          />
          &nbsp;<button onClick={this.search}>Search</button>
        </div>
      </section>
    );
  }
}
